<template>
      <el-input v-model="searchText" placeholder="请输入搜索关键字" clearable @clear="clearSearch" @keyup.enter="performSearch"
      style="margin-bottom: 20px;"></el-input>
    <div class="adCates">
        <div class="adcate-tools">
            <el-button type="warning" @click="toAdd">添加</el-button>
        </div>
        <el-table :data="filteredtableData" style="width: 100%">
            <el-table-column fixed prop="id" label="id编号" width="100" />
            <el-table-column prop="collectCouont" label="浏览量" />
            <el-table-column prop="content" label="描述" />
            <el-table-column prop="createTime" label="购买时间" />
            <el-table-column prop="name" label="名字" />
            <el-table-column prop="memberIcon" label="图片上传" />
            <el-table-column prop="memberIp" label="用户Ip"/>
            <el-table-column prop="memberNickName" label="用户昵称"/>
            <el-table-column prop="pics" label="产品图片"/>
            <el-table-column prop="productAttribute" label="产品属性"/>
            <el-table-column prop="productId" label="产品Id"/>
            <el-table-column prop="productName" label="产品名字"/>
            <el-table-column prop="readCount" label="阅读浏览量"/>
            <el-table-column prop="replayCount" label="购买量"/>
            <el-table-column prop="showStatus" label="状态展示"/>
            <el-table-column prop="star" label="星级评价"/>


            <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="toEdit(scope.row)">更新</el-button>
                    <el-button type="primary" size="small" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :page-size="page.size" :total="page.total"
            @current-change="currentchange" />
    </div>
    <el-dialog v-model="dialogFormVisible" title="产品属性分类表">
        <el-form :model="adCate">
            <el-form-item label="浏览量" :label-width="formLabelWidth">
                <el-input v-model="adCate.collectCouont" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="adCate.content" autocomplete="off" />
            </el-form-item>
            <el-form-item label="购买时间" :label-width="formLabelWidth">
                <el-input v-model="adCate.createTime" autocomplete="off" />
            </el-form-item>

            <el-form-item label="id编号" :label-width="formLabelWidth">
                <el-input v-model="adCate.id" autocomplete="off" />
            </el-form-item>

            <el-form-item label="图片上传" :label-width="formLabelWidth">
                <el-input v-model="adCate.memberIcon" autocomplete="off" />
            </el-form-item>

            <el-form-item label="用户Ip" :label-width="formLabelWidth">
                <el-input v-model="adCate.memberIp" autocomplete="off" />
            </el-form-item>

            <el-form-item label="用户昵称" :label-width="formLabelWidth">
                <el-input v-model="adCate.memberNickName" autocomplete="off" />
            </el-form-item>

            <el-form-item label="产品图片" :label-width="formLabelWidth">
                <el-input v-model="adCate.pics" autocomplete="off" />
            </el-form-item>

            <el-form-item label="产品属性" :label-width="formLabelWidth">
                <el-input v-model="adCate.productAttribute" autocomplete="off" />
            </el-form-item>

            <el-form-item label="产品Id" :label-width="formLabelWidth">
                <el-input v-model="adCate.productId" autocomplete="off" />
            </el-form-item>

            <el-form-item label="产品名字" :label-width="formLabelWidth">
                <el-input v-model="adCate.productName" autocomplete="off" />
            </el-form-item>

            <el-form-item label="阅读浏览量" :label-width="formLabelWidth">
                <el-input v-model="adCate.readCount" autocomplete="off" />
            </el-form-item>

            <el-form-item label="购买量" :label-width="formLabelWidth">
                <el-input v-model="adCate.replayCount" autocomplete="off" />
            </el-form-item>

            <el-form-item label="状态展示" :label-width="formLabelWidth">
                <el-input v-model="adCate.showStatus" autocomplete="off" />
            </el-form-item>

            <el-form-item label="星级评价" :label-width="formLabelWidth">
                <el-input v-model="adCate.star" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 按id查询按钮点击后出现的表单 -->
    <el-dialog v-model="dialogFormVisibleById" title="按ID查询数据">
        <el-form :model="adCate">
            <el-form-item label="请输入ID" :label-width="formLabelWidth">
                <el-input v-model="searchText" placeholder="ID" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisibleById = false">Cancel</el-button>
                <el-button type="primary" @click="getById(searchText)">查询
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { defineComponent } from "vue"
import {pmsAdd,pmsDelId, pmsPage,pmsEdit,pmsOne,} from '../../http/pms_comment.js'
import { ElMessage } from 'element-plus'
import {cloneDeep} from 'lodash-es'
export default defineComponent({
    data() {
        return {
            searchText: "",
            adCates: [],
            coupons: [],
            page: {
                total: 0,
                current: 1,
                size: 10
            },
            dialogFormVisible: false,
            dialogFormVisibleById:false,
            adCate: {
                "collectCouont": 0,
            "content": "",
            "createTime": "",
            "id": 0,
            "memberIcon": "",
            "memberIp": "",
            "memberNickName": "",
            "pics": "", 
            "productAttribute": "",
            "productId":0 ,
            "productName": "",
            "readCount": 0,
            "replayCount": 0,
            "showStatus": 0,
            "star": 0
            },
            formLabelWidth: 80,
            searchText: '',
        }
    },
    computed:{
        filteredtableData() {
      if (this.searchText) {
        return this.adCates.filter(item => {
          return String(item.id).includes(String(this.searchText));
        });
      } else {
        return this.adCates;
      }
    }
    },
    mounted() {
        this.getAdCatesPage(1)
    },
    methods: {
        toEdit(adcate) {
            console.log(adcate);
            this.dialogFormVisible=true;
            this.adCate=cloneDeep(adcate);    
        },
        getAdCatesPage(current) {
            const data = {
                current: current,
                size: 2
            }
            pmsPage(data).then(res => {
                console.log(res);
                const page = res.data.page;
                this.adCates = page.records;
                this.page = page;
            }).catch(err => {
                console.log(err);
            })

        },
        currentchange(current) {
            // console.log(current);
            this.getAdCatesPage(current);
            this.page.current = current;//数据更新目前显示的页面
        },
        del(id) {
            //删除数据
            //模拟删除，服务器进行处理 
            //要别人反悔机会
            // 如果只有一条数据，删除数据之后如何处理？
            //人机交互
            console.log(id)
            const params = {
                id: id
            }
            pmsDelId(params).then(res => {
                if (res.success) {
                    this.getAdCatesPage(this.page.current)

                }
                else {
                    console.log(res.msg)
                    return false
                }


            }).catch(err => {

            })
        },
        toAdd() {
            //到添加的页面
            this.adCate =  {
                "collectCouont": 0,
            "content": "",
            "createTime": "",
            "id": 0,
            "memberIcon": "",
            "memberIp": "",
            "memberNickName": "",
            "pics": "", 
            "productAttribute": "",
            "productId":0 ,
            "productName": "",
            "readCount": 0,
            "replayCount": 0,
            "showStatus": 0,
            "star": 0
            },
            this.dialogFormVisible = true;
        },

        selectById(){
            this.dialogFormVisibleById=true;

        },

        // 按ID查询
        getById(id) {
            this.coupons = [];//新建一个数组
            const params = {
                id: id
            }
            couponOne(params).then(res => {
                this.dialogFormVisibleById = false;
                this.coupons.push(res.data.help);//在这个新数组里加入查到的信息
                const adCates = this.coupons;//将新数组赋值
                this.adCates = adCates;//显示
                ElMessage("查询成功")
            }).catch(err => {
                ElMessage("查询失败，没有该ID")
                console.log(err);
            })
        },

        save() {
            const adcate = this.adCate;
            if (adcate.id == 0) {
                pmsAdd(adcate).then(res => {
                    if (res.success) {
                        //刷新页面
                        this.dialogFormVisible = false;
                        this.getAdCatesPage(this.page.current)
                        ElMessage(res.msg)
                    }
                    else {
                        ElMessage(res.msg)
                        return false
                    }
                }).catch(err => {
                    ElMessage('网络错误联系管理员')
                })
            }
            else{
                pmsEdit(adcate).then(res => {
                    if (res.success) {
                        //刷新页面
                        this.dialogFormVisible = false;
                        this.getAdCatesPage(this.page.current)
                        ElMessage(res.msg)
                    }
                    else {
                        ElMessage(res.msg)
                        return false
                    }
                }).catch(err => {
                    ElMessage('网络错误联系管理员')
                })
            }

        }

    }

});
</script>

<style lang="scss" scoped></style>